<template>
  <div class="quesSummaryConatiner" v-loading="loading">
    <div v-show="flag">
      <div class="summaryHeader">
        <div class="userInfo">
          <p class="name">
            <span class="name_warp">
              {{ questionnaireDetail.name }}
            </span>
            <span class="b-time" v-if="questionnaireDetail.notifyTime">
              <i class="el-icon-time"></i>
              {{ iconTime }}
           </span>
          </p>
          <p class="phone">{{ questionnaireDetail.basePhone }}</p>
        </div>
        <div class="userHandler">
          <span class="icon" v-if="isShowUpdateCusInfo">
            <el-tooltip :content="$t('customer.updateCustomer')" placement="bottom">
              <show-customer-info :cid="cid"></show-customer-info>
            </el-tooltip>
          </span>
          <span class="icon">
            <el-tooltip :content="$t('questionnaire.customerInfo')" placement="bottom">
              <show-question-info :phoneNum="phoneNum" :custDetial="custDetial" :cid="cid"></show-question-info>
            </el-tooltip>
          </span>
          <span class="icon phone ques_phone" :class="{disabled : !call.tel[0].tel}">
            <span class="info">
              <el-tooltip :content="questionnaireDetail.basePhone" placement="bottom">
                <phone :phone="call"></phone>
              </el-tooltip>
            </span>
          </span>
        </div>
      </div>
      <template>
        <el-tabs v-model.trim="tabActive"  @tab-click="changeTab">
          <el-tab-pane :label="rightTabPane.name" :name="rightTabPane.type" v-for="(rightTabPane, index) in rightTabPanes" :key="rightTabPane.type + index"></el-tab-pane>
        </el-tabs>
      </template>
      <template>
        <question-content v-show="tabActiveName == 'ques_content'" :questionnaireDetail="questionnaireDetail"></question-content>
        <question-history :cid="cid" :refresh="refresh" v-if="tabActiveName == 'ques_history'"></question-history>
      </template>
    </div>
  </div>
</template>
<script>
  import {deepClone, isHasMenu} from '@/utils/m7Utils'
  import QuestionContent from './QuestionContent'
  import ShowQuestionInfo from './ShowQuestionInfo'
  import ShowCustomerInfo from './ShowCustomerInfo'
  import Phone from '@/components/public-modules/contact-summary/Phone'
  import ContactHistory from '@/components/public-modules/cust-tab-content/contact-history/'
  import QuestionHistory from './QuestionHistory'
  export default {
    name: 'QuestionSummary',
    data () {
      return {
        labelPosition: 'top',
        tabs: {plan: true, businessCreate: true, history: true, changeLog: true},
        tabActiveName: 'ques_content',
        loading: true,
        rightTabPanes: [
          {name: this.$t('questionnaire.content'), type: 'ques_content'},
          {name: this.$t('questionnaire.history'), type: 'ques_history'}
        ],
        refresh: 'history',
        flag: false  // 当组件不销毁时 不在重新加载
      }
    },
    computed: {
      tabActive: {
        get () {
          return this.tabActiveName
        },
        set (v) {
          this.tabActiveName = v
        }
      },
      custDetial () {
        return this.$store.state.questionnaire.current.custDetial
      },
      phoneNum () {
        return this.questionnaireDetail.basePhone
      },
      iconTime () {
        return this.questionnaireDetail.notifyTime.split(' ')[0].split('-')[1] + '-' + this.questionnaireDetail.notifyTime.split(' ')[0].split('-')[2] + ' ' + this.questionnaireDetail.notifyTime.split(' ')[1].substring(0, 5)
      },
      questionnaireDetail () {
        return deepClone(this.$store.state.questionnaire.current)
      },
      call () {
        if (this.questionnaireDetail) {
          let call = {
            tel: [{area: '', memo: '', tel: this.questionnaireDetail.phone}],
            type: 'call',
            module: 'question',
            ques_id: this.cid
          }
          return call
        } else {
          return {
            tel: [],
            type: 'call',
            module: 'question',
            ques_id: this.cid
          }
        }
      },
      cid () {
        if (this.$route.path.split('/')[2] === 'questionnaire') {
          return this.$route.path.split('/')[4]
        } else {
          this.loading = true
          return ''
        }
      },
      isShowUpdateCusInfo () {
        if (isHasMenu('func_questionnaire_update_customer', this.$store.state.session.user)) {
          return true
        } else {
          return false
        }
      }
    },
    methods: {
      changeTab (tab) {
        this.tabActiveName = tab.name
      },
      fetchData () {
        this.loading = true
        let type = this.$route.path.split('/')[2]
        if (type !== 'questionnaire' || this.$route.path.split('/').length < 5) {
          this.loading = false
          return
        }
        this.tabActiveName = 'ques_content'
        let id = this.$route.path.split('/')[4]
        this.$store.dispatch('showQuestionnaireDetail', {_id: id}).then(() => {
          this.loading = false
          this.flag = true
        })
      }
    },
    watch: {
      '$route': 'fetchData',
      call (cur, old) {
        let nextPhone = this.$store.state.questionnaire.nextPhone
        if (old.tel[0].tel && cur.tel[0].tel !== old.tel[0].tel && nextPhone) {
          this.$nextTick(() => {
            this.$store.commit('ques/QUES_NEXT_PHONE', false)
            if (cur.ques_id) {
              let data = {}
              data.phoneNum = cur.tel[0].tel
              data.ques_id = cur.ques_id
              let objReg = new RegExp(/^[0-9]*$/)
              if (!objReg.test(data.phoneNum)) {
                return
              }
              if (data.phoneNum.length > 0 && data.phoneNum) {
                this.$store.dispatch('phoneDialout', data)
              }
            }
          })
        }
      }
    },
    components: {
      QuestionContent,
      ShowQuestionInfo,
      ShowCustomerInfo,
      ContactHistory,
      QuestionHistory,
      Phone
    },
    beforeMount () {
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .quesSummaryConatiner
    border-bottom 1px solid #d3d3d3
    min-height 100%
    .el-tabs
      background $c-back
      padding-left 20px
      border-bottom 1px solid #d1dbe5
  .summaryHeader
    overflow hidden
    background-color $c-back
  .userInfo
    height 50px
    padding 30px 0 0 30px
    float left
    .name
      font-size 16px
      display block
      height 24px
      line-height 24px
      margin-bottom 1px
    .name_warp
      float left
      color $cf-gray1
    .b-time
      background #7ccdd1
      padding 1px 5px
      border-radius 4px
      font-size 14px
      line-height 22px
      margin-left 15px
      float left
      color $cf-white
    .phone
      color $cf-gray3
  .userHandler
    float right
    margin 30px 30px 0 0
    .phone
      border 1px solid
      border-radius 50%
      border 1px solid $c-main
      cursor pointer
    .disabled
      border 1px solid #d3d3d3
      border-radius 50%
      .iconfont
        color #d3d3d3
    .icon
      width 36px
      height 36px
      display block
      float left
      margin-right 14px
      cursor pointer
</style>
